<template>
  <div class="container">
    <el-card class="userNums">
      <div slot="header" class="clearfix">
        <span>全网总用户量: &nbsp;&nbsp;&nbsp;&nbsp;{{ allUserNumber }} 人</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">导出报表</el-button> -->
      </div>
      <ve-pie
        :data="allPlatData"
        :legend="legend"
        :settings="chartSettings"
      />
    </el-card>
    <el-card class="userNums">
      <div slot="header" class="clearfix">
        <span>平台用户量趋势</span>
        <el-date-picker
          v-model="loginBeginTime"
          :picker-options="pickerOptions1"
          :editable="false"
          type="month"
          style="width:130px;margin-left:20px;"
          size="mini"
          format="yyyy-MM"
          value-format="yyyy-MM"
          placeholder="开始时间"
          class="timeLength"
        />
        至
        <el-date-picker
          v-model="loginEndTime"
          :picker-options="pickerOptions1"
          :editable="false"
          type="month"
          style="width:130px"
          size="mini"
          format="yyyy-MM"
          value-format="yyyy-MM"
          placeholder="结束时间"
          @change="searchTime1"
        />
        <!-- <el-button style="float: right; padding: 3px 0" type="text">导出报表</el-button> -->
      </div>
      <ve-line
        :data="userNumData"
        :legend="legend"
        :data-zoom="dataZoom"
        :extend="extend"
        :settings="chartSettings2"
        :data-empty="userNumData.rows.length === 0"
      />
    </el-card>
    <el-card style="width:98%">
      <div slot="header" class="clearfix">
        <span>平台开机用户量趋势</span>
        <el-date-picker
          v-model="platOpenStartTime"
          :picker-options="pickerOptions1"
          :editable="false"
          type="date"
          style="width:150px;margin-left:20px;"
          size="mini"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="选择开始时间"
          class="timeLength"
        />
        至
        <el-date-picker
          v-model="platOpenEndTime"
          :picker-options="pickerOptions1"
          :editable="false"
          type="date"
          style="width:150px"
          size="mini"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="选择结束时间"
          @change="searchTime2"
        />
        <!-- <el-button style="float: right; padding: 3px 0" type="text">导出报表</el-button> -->
      </div>
      <ve-line
        :data-zoom="dataZoom"
        :data="userOpenData"
        :legend="legend"
        :extend="chartExtend"
        :settings="chartSettings2"
        :data-empty="userOpenData.rows.length === 0"
      />
    </el-card>
  </div>
</template>

<script>
import { getPie, getLine1, getLine2 } from '@/api/search.js'
import secret from '@/utils/secret'
import 'echarts/lib/component/dataZoom'
export default {
  data() {
    this.dataZoom = [
      {
        type: 'slider',
        start: 0,
        filterMode: 'empty',
        end: 60
      }
    ]
    this.extend = {
      'xAxis.0.axisLabel.interval': 0
    }
    this.chartSettings2 = {
      yAxisType: ['KMB']
    }
    var that = this
    this.chartExtend = {
      tooltip(v) {
        v.formatter = function(params) {
          var a = []
          params.forEach(item => {
            var color = item.color // 图例颜色
            var name = item.seriesName
            var date = item.axisValue
            var precent = ''
            for (let i = 0; i < that.precent.length; i++) {
              if (that.precent[i].platformName === name && that.precent[i].statDate === date) {
                precent = that.precent[i].proportion
                break
              }
            }
            var str = `
              <div>
                <span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:${color};"></span>
                ${item.seriesName}: ${item.data[1]}人&nbsp;&nbsp;当日平台开机率: ${precent}
              </div>
            `
            a.push(str)
          })
          return a.join('')
        }
        return v
      }
    }
    return {
      precent: '',
      loginBeginTime: '',
      loginEndTime: '',
      platOpenStartTime: '',
      platOpenEndTime: '',
      pickerOptions1: {
        disabledDate(time) {
          var hours = new Date(Date.now()).getHours() * 60 * 60 * 1000
          var minutes = new Date(Date.now()).getMinutes() * 60 * 1000
          var second = new Date(Date.now()).getSeconds() * 1000
          var nowTime = parseInt(Date.now().toString().substr(0, 8) + '00000') - (hours + minutes + second)
          console.log(nowTime)
          return time.getTime() > nowTime
        }
      },
      allUserNumber: 20000,
      chartSettings: {
        radius: 100,
        offsetY: 250
      },
      legend: {
        orient: 'horizontal',
        x: 'right'
      },
      platformUserList: [
        { userNum: '1333', platformName: '联通', proportion: '20%' },
        { userNum: '4411', platformName: '电信', proportion: '20%' },
        { userNum: '2312', platformName: '移动', proportion: '20%' },
        { userNum: '4123', platformName: 'IPTV', proportion: '20%' }
      ],
      platformUserList1: [
        { platformName: '联通', userNum: '1111', statMonth: '2' },
        { platformName: '移动', userNum: '2222', statMonth: '2' },
        { platformName: '电信', userNum: '3333', statMonth: '2' },
        { platformName: '联通', userNum: '4444', statMonth: '3' },
        { platformName: '移动', userNum: '5555', statMonth: '3' },
        { platformName: '电信', userNum: '6666', statMonth: '3' },
        { platformName: '联通', userNum: '7777', statMonth: '4' },
        { platformName: '移动', userNum: '8888', statMonth: '4' },
        { platformName: '电信', userNum: '9999', statMonth: '4' }
      ],
      allPlatData: {
        columns: ['平台', '用户量'],
        rows: []
      },
      userNumData: {
        columns: ['日期', '联通', '移动', '电信'],
        rows: [
          { '联通': 1393, '移动': 2300, '电信': 4222, '日期': '2019-1' },
          { '联通': 3530, '移动': 2143, '电信': 1234, '日期': '2019-2' },
          { '联通': 2923, '移动': 1633, '电信': 1532, '日期': '2019-3' },
          { '联通': 1723, '移动': 1894, '电信': 1266, '日期': '2019-4' },
          { '联通': 3792, '移动': 3754, '电信': 1644, '日期': '2019-5' },
          { '联通': 4142, '移动': 3311, '电信': 1744, '日期': '2019-6' },
          { '联通': 2233, '移动': 1066, '电信': 4321, '日期': '2019-7' },
          { '联通': 5524, '移动': 6322, '电信': 1555, '日期': '2019-8' },
          { '联通': 1222, '移动': 1352, '电信': 2233, '日期': '2019-9' },
          { '联通': 3211, '移动': 4222, '电信': 6433, '日期': '2019-10' }
        ]
      },
      userOpenData: {
        columns: ['日期', '联通', '移动', '电信'],
        rows: [
          { '日期': '2019-10-1', '联通': 1393, '移动': 2300, '电信': 4222 },
          { '日期': '2019-10-2', '联通': 3530, '移动': 2143, '电信': 1234 },
          { '日期': '2019-10-3', '联通': 2923, '移动': 1633, '电信': 1532 },
          { '日期': '2019-10-4', '联通': 1723, '移动': 1894, '电信': 1266 },
          { '日期': '2019-10-5', '联通': 3792, '移动': 3754, '电信': 1644 },
          { '日期': '2019-10-6', '联通': 4593, '移动': 1066, '电信': 1744 }
        ]
      }
    }
  },
  mounted() {
    this.getdata()
  },
  methods: {
    changeStru(enterArr) {
      var arr = []
      var obj = []
      // 找出相同月份
      if (Array.isArray(enterArr) && enterArr.length > 0) {
        enterArr.forEach(item => {
          if (arr.indexOf(item.statMonth) < 0) {
            arr.push(item.statMonth)
          }
        })
        // 继续筛选
        if (arr.length > 0) {
          arr.forEach(index => {
            var middle = {
              nums: index,
              more: [],
              last: {}
            }
            obj.push(middle)
          })
          obj.forEach(sam => {
            enterArr.forEach(plat => {
              if (plat.statMonth === sam.nums) {
                sam.more.push(plat)
              }
            })
          })
          // console.log(obj)
          // var newArr = []
          obj.forEach(item => {
            item.more.forEach(arr => {
              for (const i in arr) {
                if (i === 'platformName') {
                  item.last[arr[i]] = arr.userNum
                }
                if (i === 'statMonth') {
                  item.last['日期'] = arr.statMonth
                }
              }
            })
          })
          var realLast = []
          obj.forEach(item => {
            realLast.push(item.last)
          })
          var keys = []
          for (const z in realLast[0]) {
            if (z !== '日期') {
              keys.push(z)
            }
          }
          keys.unshift('日期')
          var resultEnd = {
            columns: keys,
            rows: realLast
          }
          return resultEnd
        }
      } else {
        var resultEnd1 = {
          columns: [],
          rows: []
        }
        return resultEnd1
      }
    },
    changeStru2(enterArr) {
      var arr = []
      var obj = []
      // 找出相同月份
      if (Array.isArray(enterArr) && enterArr.length > 0) {
        enterArr.forEach(item => {
          if (arr.indexOf(item.statDate) < 0) {
            arr.push(item.statDate)
          }
        })

        // 继续筛选
        if (arr.length > 0) {
          arr.forEach(index => {
            var middle = {
              nums: index,
              more: [],
              last: {}
            }
            obj.push(middle)
          })
          obj.forEach(sam => {
            enterArr.forEach(plat => {
              if (plat.statDate === sam.nums) {
                sam.more.push(plat)
              }
            })
          })
          // console.log(obj)
          // var newArr = []
          obj.forEach(item => {
            item.more.forEach(arr => {
              for (const i in arr) {
                if (i === 'platformName') {
                  item.last[arr[i]] = arr.openUserNum
                }
                if (i === 'statDate') {
                  item.last['日期'] = arr.statDate
                }
              }
            })
          })
          var realLast = []
          obj.forEach(item => {
            realLast.push(item.last)
          })
          var keys = []
          for (const z in realLast[0]) {
            if (z !== '日期') {
              keys.push(z)
            }
          }
          keys.unshift('日期')
          var resultEnd = {
            columns: keys,
            rows: realLast
          }
          return resultEnd
        }
      } else {
        var resultEnd1 = {
          columns: [],
          rows: []
        }
        return resultEnd1
      }
    },
    searchTime1() {
      var line = {
        platformId: '',
        beginTime: this.loginBeginTime,
        endTime: this.loginEndTime
      }
      getLine1(secret.Encrypt(line)).then(res => {
        if (res.resultCode === '0000') {
          this.userNumData.columns = this.changeStru(res.data.platformUserList).columns
          this.userNumData.rows = this.changeStru(res.data.platformUserList).rows.reverse()
        }
      })
    },
    searchTime2() {
      var line = {
        platformId: '',
        beginTime: this.platOpenStartTime,
        endTime: this.platOpenEndTime
      }
      getLine2(secret.Encrypt(line)).then(res => {
        if (res.resultCode === '0000') {
          this.precent = res.data.platformUserList
          this.userOpenData.columns = this.changeStru2(res.data.platformUserList).columns
          this.userOpenData.rows = this.changeStru2(res.data.platformUserList).rows.reverse()
        }
      })
    },
    getdata() {
      // 饼图
      getPie({}).then(res => {
        // console.log(res)
        if (res.resultCode === '0000') {
          this.allUserNumber = res.data.totalNetworkUsers // 人数
          var platformUserList = res.data.platformUserList // list
          platformUserList.forEach(item => {
            const items = {
              '平台': item.platformName,
              '用户量': item.userNum
            }
            this.allPlatData.rows.push(items)
          })
        }
      })
      // 折线一
      var nowTime = new Date().getTime() // 当前时间
      var year = new Date(nowTime).getFullYear()
      var month = new Date(nowTime).getMonth() + 1
      // 十个月前，有误差
      var agoTime = nowTime - (9 * 30 * 24 * 60 * 60 * 1000)
      var agoYear = new Date(agoTime).getFullYear()
      var agoMonth = new Date(agoTime).getMonth() + 1
      var line = {
        platformId: '',
        beginTime: agoYear + '-' + agoMonth,
        endTime: year + '-' + month
      }
      getLine1(secret.Encrypt(line)).then(res => {
        if (res.resultCode === '0000') {
          this.userNumData.columns = this.changeStru(res.data.platformUserList).columns
          this.userNumData.rows = this.changeStru(res.data.platformUserList).rows.reverse()
          // var platformUserList = res.data.platformUserList // list
        }
      })
      // 折线二
      var nowTime1 = new Date().getTime() - (1 * 24 * 60 * 60 * 1000) // 当前时间
      var agoTime1 = nowTime1 - (6 * 24 * 60 * 60 * 1000)
      var nowTime1Year = new Date(nowTime1).getFullYear()
      var nowTime1Month = new Date(nowTime1).getMonth() + 1
      var nowTime1Day = new Date(nowTime1).getDate()
      var agoTime1Year = new Date(agoTime1).getFullYear()
      var agoTime1Month = new Date(agoTime1).getMonth() + 1
      var agoTime1Day = new Date(agoTime1).getDate()
      var line2 = {
        platformId: '',
        beginTime: agoTime1Year + '-' + agoTime1Month + '-' + agoTime1Day,
        endTime: nowTime1Year + '-' + nowTime1Month + '-' + nowTime1Day
      }
      getLine2(secret.Encrypt(line2)).then(res => {
        if (res.resultCode === '0000') {
          this.precent = res.data.platformUserList
          this.userOpenData.columns = this.changeStru2(res.data.platformUserList).columns
          this.userOpenData.rows = this.changeStru2(res.data.platformUserList).rows.reverse()
        }
      })
    }
  }
}
</script>

<style scoped>
.userNums{
  width: 49%;
  display: inline-block;
  box-sizing: border-box;
}
.container{
  padding: 5px 1%;
}

</style>
<style>
.el-card__body{
  padding: 5px 20px !important;
}
.el-card__header{
  height: 51px;
  padding: 11px 20px !important;
}
</style>
